<template>
  <div class="navBar" :style="{ height: $store.state.screenH + 'px' }">
    <mt-navbar v-model="index" @click.native="changeSwipe" fixed>
      <mt-tab-item id="0">选项一</mt-tab-item>
      <mt-tab-item id="1">选项二</mt-tab-item>
      <mt-tab-item id="2">选项三</mt-tab-item>
    </mt-navbar>
    <mt-swipe
      ref="swipe"
      :auto="0"
      :defaultIndex="indexSwipe"
      :showIndicators="false"
      class="swipe"
      @change="changeIndex"
    >
      <mt-swipe-item>1</mt-swipe-item>
      <mt-swipe-item>2</mt-swipe-item>
      <mt-swipe-item>3</mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: "0",
      indexSwipe: 0,
    };
  },
  mounted() {},
  methods: {
    changeSwipe() {
      this.indexSwipe = this.index - 0;
      this.$refs.swipe.swipeItemCreated();
    },
    changeIndex(i){
      this.index=i+''
    }
  },
};
</script>
<style lang="less" scoped>
div.navBar {
  .swipe {
    margin-top: 55px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    color: white;
    background-color: red;
    font-size: 100px;
  }
}
</style>